<template>
    <div class="page-content">
        <!-- 主体区域 -->
        <!-- 主体区域 -->
        <el-row :gutter="10" style="margin-bottom:10px">
            <el-col :span="5">
                <el-button type="primary" @click="addBaseDialog = true">新增人员信息</el-button>
                <el-button type="danger" plain @click="multipledelete">批量删除</el-button>
            </el-col>
        </el-row>

        <!-- 表格头部 -->
        <table-bar :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="4.375rem">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-row>
                                <el-col :span="7" style="width: 300px;">
                                    <el-input style="width: 130px;" placeholder="输入id或姓名查询" v-model="searchValue" size="small">
                                    </el-input>
                                    <el-button type="primary" icon="el-icon-search" @click="getEmployee">搜索</el-button>
                                </el-col>
                            </el-row>

                        </el-col>

                    </el-row>
                </el-form>
            </div>
        </table-bar>


        <!-- 表格头部 -->


        </table-bar>

        <!-- 增删改查都要引入这个组件 -->
        <el-table ref="table" :data="employeeList" :showPage="false"  v-show="shuxin"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
                <!-- <el-table-column type="index" ></el-table-column> -->
            <el-table-column label="头像" prop="profilePhoto">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.profilePhoto"></el-avatar>
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="180" v-if="columns[0].show">
            </el-table-column>
            <el-table-column v-model="searchData.username" prop="username" label="姓名" width="180" v-if="columns[1].show">
            </el-table-column>
            <el-table-column prop="phone" label="电话" v-if="columns[2].show">
            </el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="formatRole" v-if="columns[3].show">
            </el-table-column>
            <el-table-column prop="roles[0].name" label="职能" v-if="columns[4].show">

            </el-table-column>


            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button type="text" style="color: #FA6962" icon="el-icon-delete" @click="removedoperator(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryList.page" :page-sizes="[1,2,5,10]"
            :page-size="queryList.size" layout="total, sizes, prev, pager, next, jumper" :total=total>
        </el-pagination>

        <!-- 新建人员信息对话框 -->
        <el-dialog :visible.sync="addBaseDialog" @close="addBaseDialogClose" title="新建信息" width="50%" top="20vh">
            <el-form :model="addBaseForm" :rules="addBaseFormRules" ref="addBaseFormRef" label-width="110px">
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker v-model="addBaseForm.birthday" prop="birthday" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addBaseForm.password"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addBaseForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="照片" prop="profilePhoto">
                    <el-upload class="avatar-uploader" action="http://localhost:8080/authority/user/web/webRegister" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="addBaseForm.profilePhoto" :src="addBaseForm.profilePhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <!-- <el-input v-model="addBaseForm.sex"></el-input> -->
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :v-model="addBaseForm.sex">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="addBaseForm.username"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addBaseDialog = false">取 消</el-button>
                <el-button type="primary" @click="addBaseInfo">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改订单弹窗开始 -->
        <el-dialog title="修改人员信息" :visible.sync="editDialogVisible" width="40%" @close="eidtDialogClosed">

            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker v-model="editForm.birthday" prop="birthday" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="照片" prop="profilePhoto">
                    <el-upload class="avatar-uploader" :action="photoUrl" :show-file-list="false" :on-success="handleAvatarSuccess1">
                        <img v-if="editForm.profilePhoto" :src="editForm.profilePhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <!-- <el-input v-model="editForm.sex"></el-input> -->
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :v-model="editForm.sex">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="editDialog()">取 消</el-button>
                <el-button type="primary" @click=" editUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改订单弹窗结束 -->
    </div>



</template>

<script>

    import {
        getAllDovecoteNumber,
        userslist,
        edituser,
        deleteuser,
        adduser,
        multipledelete,
        machinelist,
        editmachine,
        deletemachine,
        addmachine,
        multimachinedelete,
        openmachine,
        closemachine,
        EidtRequest
    } from "../../../api/Basic/PersonnelInformation";

    export default {
        name: 'PersonnelInformation',
        meta: {
            title: '人员信息'
        },

        data() {
            //验证手机号的规则
            var checkMobile = (rule,value,cb) => {
                const regMobile = /^(0|86|17951)?(13|0-9||15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

                if(regMobile.test(value)) {
                    return cb()
                }

                cb(new Error('error!!'))
            }
            return {
                //保存需要修改的id
                changeId: "",
                // 控制修改用户对话框的显示与隐藏
                editDialogVisible: false,
                // 查询到的用户信息对象
                editForm: {
                    birthday: "",
                    password: "",
                    // enterpriseId: 0,
                    phone: "",
                    profilePhoto: "",
                    sex: "",
                    username: ""
                },
                // 修改表单的验证规则对象
                editFormRules: {
                    birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    phone: [{  required: true, message: '请输入电话' ,trigger: 'blur'},{validator:checkMobile,trigger:'blur'}],
                    profilePhoto: [{ required: true, message: '请上传图片',trigger: 'blur'}],
                    sex: [{ required: true, message: '请输入性别' ,trigger: 'blur'}],
                    username: [{ required: true, message: '请输入用户名',trigger: 'blur' }],
                },

                 options: [{
                    value: '1',
                    label: '男'
                }, {
                    value: '0',
                    label: '女'
                }],
                value: '',

                //新增基地信息对话框
                addBaseDialog: false,

                idList: [],


                columns: [
                    {
                        name: "id",
                        show: false,
                    },
                    {
                        name: "姓名",
                        show: true,
                    },
                    {
                        name: "电话",
                        show: true,
                    },
                    {
                        name: "性别",
                        show: true,
                    },
                    {
                        name: "",
                        show: true,
                    },

                ],
                photoUrl: '',
                //分页器数据
                page: 1,
                size: 10,
                total: 0,
                profilePhoto: '',
                shuxin: false,
                //搜索
                searchData: {
                    username: "",
                    id: "",
                },

                receive: [{}],
                layout: "search,refresh",
                searchValue: '',
                // layout:refresh,
                // options: [{
                //     value: '1',
                //     label: 'A01'
                // }, {
                //     value: '2',
                //     label: 'A02'
                // }],
                // value: '',

                enterpriseList: [],
                editDialogVisible: false,
                employeeList1: [], //接收全部数据
                employeeList: [], //接收分页数据
                //页码
                queryList: {
                    page: 1,
                    size: 10,
                    username: ''
                },
                addBaseFormRules: {
                    birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
                    phone: [{ required: true, message: '请输入电话', trigger: 'blur' },{validator:checkMobile,trigger:'blur'}],
                    // profilePhoto: [{ required: true, message: '请输入图片', trigger: 'blur' }],
                    sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                },
                addBaseForm: {
                    birthday: "",
                    password: "",
                    // enterpriseId: 0,
                    phone: "",
                    profilePhoto: "",
                    sex: "",
                    username: "",
                },
                // 控制新增用户对话框关闭
                addFormRules: {
                    editDialogVisible: false,
                    username: [


                        {
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        }, {
                            min: 3, max: 10,
                            message: '长度3~10字符', trigger: 'blur'
                        }
                    ],
                    phone: [

                        {
                            required: true,
                            message: '请输入电话',
                            trigger: 'blur'
                        }, {
                            min: 11, max: 12,
                            message: '长度11~12字符', trigger: 'blur'
                        }
                    ],

                    



                },



            }
        },
        created() {
            //获取信息
            //  this.getEnterpriseInfo()
            this.getEmployee()
            //this.getEnterpriseList()
        },

        methods: {
            handleAvatarSuccess(res, file) {
                this.addBaseForm.profilePhoto = URL.createObjectURL(file.raw);
            },

            handleAvatarSuccess1(res, file) {
                this.editForm.profilePhoto = URL.createObjectURL(file.raw);
            },



            async getEmployee() {
                this.shuxin = false;
                console.log("搜索内容", this.searchValue)
                var re = new RegExp("[\u4E00-\u9FA5]+");
                if (re.test(this.searchValue)) {
                    this.searchData.username = this.searchValue;
                } else if (this.searchValue == '') {
                    this.searchData.username = this.searchValue;
                    this.searchData.id = this.searchValue;
                } else {
                    this.searchData.id = this.searchValue;
                }

                console.log("搜索的名字是" + this.searchData.username)
                // this.queryList.username = this.searchData.username;
                //获取全部员工信息
                const { data: res } = await this.$http.get(`/authority/enterprise/enterprise`)
                this.employeeList1 = res.data
                console.log(res);
                if (res.statusCode !== 20000) {
                    return this.$message.error('获取员工信息失败')
                }

                //分页获取员工信息
                const { data: res1 } = await this.$http.get(`/authority/enterprise/enterprise/${this.queryList.page}/${this.queryList.size}`)
                //获取员工列表成功
                // 保存数据
                // for(var i=0; res.dara)
                // console.log(res.data[0].username);
                // console.log(this.searchData.username);
                // console.log(res.data.length);
                //搜索名字
                var j = 0;

                for (var i = 0; i < res.data.length; i++) {
                    if (this.searchData.username == res.data[i].username || this.searchData.id == res.data[i].id) {
                        // this.employeeList = res.data[i];
                        j = 1;
                        this.receive[0] = res.data[i];
                        // console.log(res.data[i]);
                        // console.log(this.receive);
                        this.employeeList = this.receive;

                    }
                }
                if (j == 0) {
                    this.employeeList = res1.data.records
                }
                // console.log(this.receive)

                // this.employeeList = res.data

                //搜索名字之后重新渲染页面
                this.shuxin = true;
                this.profilePhoto = res1.data.records[0].profilePhoto;

                // console.dir(res1.data.records.length);
                //获取全部数据的长度
                this.total = res.data.length;
                // console.dir(res.data[0].profilePhoto)

            },
            // 删除用户信息
            async removedoperator(id) {
                const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)

                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除操作')
                }
                console.log(111234);
                deleteuser(id).then(
                    res => {
                        console.log(res);
                        this.getEmployee()
                    }
                ).catch(error => {
                    return this.$message.error('获取操作人信息失败')
                })
            },

            //监听Pagesize改变的事件
            handleSizeChange(newSize) {
                console.log(newSize)
                this.queryList.size = newSize
                this.getEmployee()
            },

            //监听页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage)
                this.queryList.page = newPage
                this.getEmployee()
            },

            // 监听添加信息对话框关闭
            addBaseDialogClose() {
                // 表单验证清除
                this.$refs.addBaseFormRef.resetFields()
                // 图片视频清除
                this.$refs.uploadPicRef.clearFiles()
                this.$refs.uploadVedioRef.clearFiles()

            },

            eidtDialogClosed() {
                this.$refs.editFormRef.resetFields()
            },

            editDialog() {
                console.log("关闭")
                this.editDialogVisible = false;
            },

            // ！！！添加人员信息
            addBaseInfo() {
                console.log("性别", this.value);
                this.addBaseForm.sex = this.value
                console.log("性别",this.addBaseForm.sex)
                console.log("日期", this.addBaseForm.birthday)
                var date = new Date(this.addBaseForm.birthday)
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                let h = date.getHours()
                h = h < 10 ? ('0' + h) : h
                let M = date.getMinutes()
                M = M < 10 ? ('0' + M) : M
                let s = date.getSeconds()
                s = s < 10 ? ('0' + s) : s
                let dateTime = y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
                console.log("时间", dateTime)
                this.addBaseForm.birthday = dateTime


                // 表单校验
                this.$refs.addBaseFormRef.validate(async flag => {
                    //发送新增请求


                    const { data: res } = await this.$http.post('/authority/user/web/webRegister', this.addBaseForm)
                    if (res.statusCode !== 20000)
                        return this.$message.error('添加失败')

                    // console.log(res.data.id);
                    // const id = res.data.id

                    this.addBaseDialog = false
                    this.$message.success('添加成功')

                    //刷选列表
                    this.getEmployee()

                })

            },

            // 根据id展示编辑用户的对话框
            async showEditDialog(id) {
                this.editDialogVisible = true;
                this.photoUrl = "http://localhost:8081/authority/user/update?id=" + id;
                this.changeId = id;
            },
            changeColumn(columns) {
                this.columns = columns
                this.$refs.table.doLayout()
            },



            //点击确认之后将修改的数据传入接口
            async editUserInfo() {
                var obj = {};
                console.log("性别", this.value);
                this.editForm.sex = this.value
                console.log("需要修改的", this.editForm.sex);
                console.log("日期", this.editForm.birthday)
                var date = new Date(this.editForm.birthday)
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                let h = date.getHours()
                h = h < 10 ? ('0' + h) : h
                let M = date.getMinutes()
                M = M < 10 ? ('0' + M) : M
                let s = date.getSeconds()
                s = s < 10 ? ('0' + s) : s
                let dateTime = y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
                console.log("时间", dateTime)
                this.editForm.birthday = dateTime
                console.log("全部数据", this.employeeList1)
                for (var i = 0; i < this.employeeList1.length; i++) {
                    if (this.employeeList1[i].id == this.changeId) {
                        obj = this.employeeList1[i];
                        console.log("需要修改的数据是", obj);
                        // 将editForm的数据赋值给obj，注意要赋值的对象要对应
                        obj = this.editForm
                        console.log("xinshuju", obj)
                        //调用接口，传入的参数为obj
                        this.$refs.editFormRef.validate(async flag => {
                            const { data: res } = await EidtRequest(JSON.stringify(obj), this.changeId);
                            console.log("修改用户请求到的列表", res);
                            if (res.statusCode !== 20000) {
                                this.$message.error("查询数据失败");
                            }
                            // console.log(res)
                        })
                        break;
                    }
                }
                this.getEmployee();
                this.editDialogVisible = false;
            },

            // 监听修改用户对话框的关闭事件
            eidtDialogClosed() {
                this.$refs.editFormRef.resetFields()
            },

            // 监听添加信息对话框关闭
            addBaseDialogClose() {
                // 表单验证清除
                this.$refs.addBaseFormRef.resetFields()

            },
            async removeUserById(id) {

                const confirmResult = await this.$confirm('此操作将永久删除该人员信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)

                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除操作')
                }
                deleteuser(id).then(
                    res => {
                        console.log(res);
                        this.getEmployee();
                    }
                ).catch(error => {
                    return this.$message.error('删除人员信息失败')
                })

            },
            // 监听批量删除
            handleSelectionChange(val) {
                val.forEach(element => {
                    this.idList.push(element.id);
                });
            },
            // 批量删除
            async multipledelete() {
                const confirmResult = await this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)

                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除操作')
                }
                // console.log(this.idList, 11111);
                const { data: res } = await multipledelete(this.idList);
                // console.log(res, 233);
                if (res.statusCode !== 20000) {
                    return this.$message.error('获取人员信息失败')
                }
                this.getEmployee()
                this.idList = [];
            },

           formatRole: function (row, column) {
                // console.log("男女",row.sex)
                return row.sex == "1" ? "男" : '女';
            },




        }
    }
</script>


<style lang="scss" scoped>
    .el-input--suffix .el-input__inner {
        padding-right: 0.9375rem !important;
    }

    .el-textarea__inner {
        min-width: 12.25rem;
    }

    .el-upload {
        margin-left: 1.25rem;
    }

    .upload_container {
        display: flex;
        justify-content: center;
    }

    .upload_label {
        text-align: right;
        width: 6.25rem;
    }

    .el-pagination {
        margin-top: 0.375rem;
        text-align: center;
    }


    .el-upload-list--picture-card .el-upload-list__item {
        margin: 0 0.5rem 0.5rem 0.5rem;
    }

    .page-content {
        width: 100%;
        height: 100%;
    }

    .avatar {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
    }

    .page {
        margin-top: 0.375rem;
        text-align: center;
    }
</style>